<template>
  <div>
    <van-nav-bar
        title="购物车"
    />
    <van-checkbox-group v-model="result" ref="checkboxGroup">
      <van-checkbox name="b" v-for="(item,index) in cartList" :key="item.product_id" :disabled="edit"
                    @click="chose(index)" :name="item">
        <div style="width: 91vw">
          <van-swipe-cell>
            <van-card
                :num="item.number"
                :price="item.retail_price"
                :title="item.goods_name"
                :thumb="item.list_pic_url"
                class="goods-card"
            >
              <template v-if="edit" #footer>
                <van-button size="mini" :disabled="item.number<=0" @click="item.number--">
                  <van-icon name="arrow-left"/>
                </van-button>
                {{ item.number }}
                <van-button size="mini">
                  <van-icon name="arrow" @click="item.number++"/>
                </van-button>
              </template>
            </van-card>

            <template #right>
              <van-button square text="删除" type="danger" class="delete-button" @click="remove(item.product_id)"/>
            </template>
          </van-swipe-cell>
        </div>
      </van-checkbox>
    </van-checkbox-group>


    <van-submit-bar :price="totalPrice" button-text="提交订单">
      <van-checkbox v-model="choseAll" @click="onChange">全选</van-checkbox>
      <template #tip>
        累加共{{ total }}件商品,可点击
        <van-tag type="primary" v-if="!edit" @click="edit=!edit">编辑</van-tag>
        <van-tag type="warning" v-else @click="edit=!edit">完成编辑</van-tag>
        按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import {NavBar} from 'vant';
import {SubmitBar} from 'vant';
import {Checkbox, CheckboxGroup} from 'vant';
import {SwipeCell} from 'vant';
import {Tag} from 'vant';

import {getCart, removeCart, updateCart} from "@/api";
import {GetCartListData } from '@/request/api'
import {addCart} from "@/api";

export default {
  components: {
    [NavBar.name]: NavBar,
    [SubmitBar.name]: SubmitBar,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [SwipeCell.name]: SwipeCell,
    [Tag.name]: Tag
  },
  data() {
    return {
      checked: true,
      result: [],  //被选中的对象
      cartList: [],
      cartTotal: {},
      edit: false,
      choseAll: false
    };
  },
  computed: {
    total() {
      return this.result.reduce((total, item) => {
        return total + item.number;
      }, 0);
    },
    totalPrice() {
      let reduce = this.result.reduce((total, item) => {
        debugger
        return total + item.number * item.retail_price;
      }, 0);
      return reduce*100;
    },
  },
  watch: {
    edit() {
      console.log(this.result)
      if (!this.edit) {
        this.update();
      }
    },
    cartList(){
      this.choseAll= this.cartList.length === this.result.length;
    }
  },
  methods: {
    async remove(id) {
      await removeCart(id);
      await this.init();
    },
    async update() {
      for (const item of this.cartList) {
        let good = {"goodsId": item.goods_id, "id": item.id, "number": item.number, "productId": item.product_id};
        await updateCart(good);
      }
    },
    onChange() {
      if (this.choseAll) {
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll(false);
      }
    },
    loadData (data) {
      // 列表数据
      this.cartList = data.cartList
      // 商品总信息
      this.cartTotal = data.cartTotal
      // 清空this.result数组，后面的操作不会使这个数组越来越长
      this.result = []
      this.cartList.map(item => {
        // this.cartList = item.checked === 1 ? this.result.push(item.id) : ''
      })
    },
    init() {
      GetCartListData().then(res => {
        // console.log(res)
        this.loadData(res.data)
      })
    },
    chose(i) {
    }
  },
  async created() {
    await this.init();
  }
}
</script>

<style>
.van-submit-bar {
  position: fixed;
  bottom: 50px; /* 根据 van-tabbar 的高度调整 */
  width: 100%;
}

.van-tabbar {
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style>
